<template>
  <div class="container">
    <div class="custom-operation-page scale-1px-top" :style="{justifyContent: !clientMobile ? 'space-between' : ''}">
      <div class="report-box" @click="reportHandler">
        <span class="bg_img icon-report" :style="{backgroundImage:'url('+require('IMG/custom/report@2x.png')+')'}"></span>报备
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div class="phone-button width-short" @click="phoneHandler" v-if="clientMobile">
          <img :src="require('IMG/custom/phone@2x.png')" alt="">电话
        </div>
        <div class="consult-button" :class="!clientMobile && 'button width-long'" @click="consultHandler">
          <img :src="require('IMG/custom/consult@2x.png')" alt="">联系
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    clientMobile: { type: String, default: '' }
  },
  methods: {
    /**
     * 报备
     */
    reportHandler () {
      this.$emit('onreport')
    },

    /**
     * 打电话
     */
    phoneHandler () {
      this.$emit('onphone')
    },

    /**
     * 聊天
     */
    consultHandler () {
      this.$emit('onconsult')
    }
  }
}
</script>
<style lang="less">
.container {
  .custom-operation-page {
    .width-short {
      width: 134px !important;
    }
    .width-long {
      width: 268px !important;
    }
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px !important;
    background: #ffffff;
    padding: 0 16px 0 27px;
    justify-content: space-between;
    .attention-box,
    .report-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        display: inline-block;
        width: 18px;
        height: 21px;
      }
      font-size: 10px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 16px;
    }
    .phone-button,
    .consult-button {
      width: 134px;
      height: 44px;
      box-sizing: border-box;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
    .phone-button {
      background: rgba(64, 68, 87, 1);
    }
    .consult-button {
      background: rgba(0, 122, 230, 1);
      margin-left: 16px;
    }
    .button {
      width: 212px;
    }
  }
}
</style>
